<template>
  <div v-if="images" style="margin-top:-60px">
    <p class="myback" @click='handelclick6()'>&lt;</p>
    <!-- 轮播图部分 -->
    <div class="swiper-container deatil-swiper" :key="datalist.length">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in datalist.photo" :key="item.id">
          <img :src="item.url" alt="">
        </div>
      </div>
    </div>

    <!-- 商品名,价格部分 -->
    <div class="deta-info">
      <div class="dif-top">
        <span>包邮</span>
        {{datalist.title}}
      </div>
      <div class="dif-center" style="text-align:left">
        <span>￥<b>{{datalist.price | mymoney1(0,2)}}</b>{{datalist.price | mymoney1(2)}}</span>
      </div>
      <div class="dif-bottom">
        <del>{{datalist.originPrice}}</del>
        <span>月销量{{datalist.saleNum}}</span>
      </div>
    </div>

    <!-- 淘宝图文详情 -->
    <div class="data-show">
      <div class="ds-top">
        -淘宝图文详情-
      </div>
      <ul class="ds-img" >
        <li v-for="(item, index) in images" :key="index">

          <img   :src="item.url" alt="">

        </li>
        <li class="lastli">
            <span>去熊猫优选APP,商品详情更丰富</span>
        </li>
      </ul>
    </div>

    <!-- 底部部分 -->
    <div class="data-footer">
        <span>{{datalist.couponValue | mymoney1(0,2)}}淘宝优惠卷</span>
        <button @click="myclick(datalist)">领劵购买</button>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import '@/util/filters'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      datalist: [],
      isshow: true,
      images: null
    }
  },
  async mounted () {
      this.$store.commit("hide")
      this.$store.commit("hide1")
    await axios.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${this.$route.params.detaiId}&normal=1&sa=`).then(res => {
      this.datalist = res.data.data.detail

      this.images = this.datalist.descContentList.map(el => el.image)
      this.images.forEach((el, index) => {
        if (el === undefined) {
          this.images.splice(index, 1)
        }
      })
    })
    new Swiper('.deatil-swiper', {
      autoplay: true
    })
  },
  destroyed() {
      this.$store.commit("show")
      this.$store.commit("show1")
  },
  methods: {
    handelclick6(){
      this.$router.back()
    },
    myclick (obj) {
      var res = JSON.parse(localStorage.getItem('shopping') || '[]')
      var myobj = {
        id: obj.id,
        name: obj.title,
        image: obj.image,
        price: obj.price,
        couponValue: obj.couponValue,
        originPrice: obj.originPrice,
        saleNum: obj.saleNum,
        expireMsg: obj.favoritedCount,
        couponStatus: obj.couponStatus
      }
      console.log(obj)
      if (res.length === 0) {
        res.push(myobj)
        localStorage.setItem('shopping', JSON.stringify(res))
        // 将数据存到localStorage中
        return
      }
      for (var i = 0; i < res.length; i++) {
        if (res[i].id === myobj.id) {
          Dialog({ message: '已经添加过了,请不要重复添加' })
          return
        }
      }
      res.push(myobj)
      localStorage.setItem('shopping', JSON.stringify(res))
      // 将数据存到localStorage中
    }
  }
}
</script>
<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.myback{
  height: 50px;
  width: 50px;
  position: fixed;
  top: 10px;
  font-size: 30px;
  font-weight: bold;
  left: 20px;
  background: rgba($color: #000000, $alpha: .5);
  border-radius:50%;
  color: white;
  text-align: center;
  line-height: 50px;
  z-index: 50;
}
.deatil-swiper{
  height: 441px;
   touch-action: none;
  width: 100%;
  .swiper-slide{
     touch-action: none;
    height: 100%;
    img{
      height: 100%;
    }
  }
}
.deta-info{
  height: 147px;
  width: 100%;
  padding: 10px;
  box-sizing:border-box;
  border-bottom: 1px solid;
  .dif-top{
    height: 51px;
    span{
      padding:1px 5px;
      border: 1px solid black;
      font-size: 12px;
    }
  }
  .dif-center{
    height: 57px;
     margin: 2px 0;
     span{
       font-size: 20px;
       font-weight: bold;
       color: red;
       b{
         font-size: 25px;
       }
     }
  }
  .dif-bottom{
    height: 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
  }
}
.data-show{
  .ds-top{
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom:1px solid;
  }
  .ds-img{
    width: 100%;
    margin-bottom: 70px;
    li{
      width: 100%;
      img{
         width: 100%;
      }
    }
    .lastli{
      height: 140px;
      background: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        height: 32px;
        width: 264px;
        display: block;
        border: 1px solid red;
        border-radius:15px;
        color: red;
        text-align: center;
        line-height: 32px;
        font-size: 16px;

      }
    }

  }

}
.data-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  height: 54px;
  width: 100%;
  background: white;
  color: red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  span{
    font-size: 16px;
    margin-right: 5px;
  }
  button{
    height: 100%;
    width: 55px;
    background: red;
    float: right;
    border: 0;
    width: 164px;
    font-weight: bold;
    color: white;
    font-size: 20px;
  }
}
</style>
